<template>
    <div class="storeInfo">
        <div class="head">    
            <el-form :model="form" class="headForm">
                <el-form-item>
                    <el-select v-model="form.type" placeholder="图片类型" clearable>
                        <el-option v-for="item in imgtype" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.spec" clearable  placeholder="图片规格">
                        <el-option v-for="item in imgsize" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.image_id" placeholder="图片ID"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.name" placeholder="图片名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.keywords" placeholder="关键词"></el-input>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button type="success" @click="theClick('add')">添加</el-button>
            </el-form>      
        </div>
         
        <!-- tab部分 -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <!--缩略图	图片名称	图片类型	尺寸	规格	关键词	操作 -->
                <el-table-column prop="" label="缩略图" fixed>
                    <template slot-scope="scope">
                        <img :src="scope.row.show_src" alt="" style="width:60px;height:60px">
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="图片名称"></el-table-column>
                <el-table-column prop="type_cn" label="图片类型"></el-table-column>
                <el-table-column prop="size" label="尺寸"></el-table-column>
                <el-table-column prop="spec_cn" label="规格"></el-table-column>
                <el-table-column prop="keywords" label="关键词"></el-table-column>
                <el-table-column  label="查看" prop="price_id" v-if="limitList.length>0">
                    <template  slot-scope="scope">            
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row)">
                            <i v-if="item.url == 'copy'" class="copy" data-clipboard-action="copy" :data-clipboard-text="scope.row.src">{{item.name}}</i>
                            <i v-else>{{item.name}}</i>
                            <i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="查看"  v-else>/</el-table-column>
            </el-table>
                        
        </div>
        <!-- 分页部分 -->
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
        <el-dialog :visible.sync="add_eidt_alert" :title="editTitle">
            <el-form :model="editForm">
                <el-form-item label="图片名称" :label-width="editW">
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="上传图片" :label-width="editW" v-if="editTitle != '添加'">
                    <el-input v-model="editForm.src"></el-input>
                    <p style="width:150px;height:100px;border:1px solid #ccc;text-algin:center;margin-top:10px;text-align:center"><img style="width:100px;height:100px" :src="editForm.show_src" alt=""></p>
                </el-form-item>
                <div v-else style="margin-bottom:22px">
                    <upload spantxt="上传图片" coverImg="" coverPath="" v-on:throwFilePath = 'getSrc'></upload>
                </div>
                <el-form-item label="图片类型" :label-width="editW">
                    <el-select v-model="editForm.type" clearable>
                        <el-option v-for="item in imgtype" :key="item.status" :value="item.status" :label="item.status_cn"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图片规格" :label-width="editW">
                    <el-select clearable v-model="editForm.spec">
                        <el-option v-for="item in imgsize" :key="item.status" :value="item.status" :label="item.status_cn"></el-option>
                    </el-select>                    
                </el-form-item>
                <el-form-item label="图片尺寸" :label-width="editW">
                    <el-input v-model="editForm.size"></el-input>
                </el-form-item>
                <el-form-item label="关键词" :label-width="editW">
                    <el-input v-model="editForm.keywords"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="add_eidt_alert = false">取消</el-button>
                <el-button @click="comfirm" type="primary">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<style lang="scss">
.prizeBox{
    .el-form-item__content{
        display: flex;
        flex-direction: row;
        justify-content:space-between;
        .goodsearch{
            width:333px;
        }
        .quntanty{
            width:130px;
        }
    }
}
</style>
<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
import upload from "../../pop/upload.vue";
import Clipboard from 'clipboard'; 
export default {
    components:{upload},
    data(){
        return {          
            tableData:[],
            total:50,
            size:20,
            pageNum:1,
            form:{
                size:20,
                page:1
            },
            imgtype:[
                // 图片类型，1=单品封面，2=套餐封面，3=LED投屏图，4=广告图
                // {status:"",status_cn:"图片类型"},
                {status:"1",status_cn:"单品封面"},
                {status:"2",status_cn:"套餐封面"},
                {status:"3",status_cn:"LED投屏图"},
                {status:"4",status_cn:"广告图"},
            ],
            imgsize:[
                //图片规格,1=1:1,2=16:9,3=16:10
                // {status:"",status_cn:"图片规格"},
                {status:"1",status_cn:"1:1"},
                {status:"2",status_cn:"16:9"},
                {status:"3",status_cn:"16:10"},
            ],
            limitList:[
                {name:"复制链接",url:"copy"},
                {name:"编辑",url:"edit"},
                {name:"删除",url:"del"},
            ],
            add_eidt_alert:false,
            editForm:{
                // type:1
            },
            editTitle:"添加",
            editW:'120px'

        }
    },
    mounted(){
        var that = this;
        that.getList()       
    },
    methods:{
        search(){
            const that = this;
            that.getList();
        },          
        changePage(val){
            var that = this;
            that.pageNum = val;
            this.form.page = val;
           that.getList()
        },
        getList(){
            const that = this;
            abc.get(that,potUrl.imageindex,that.form,(res)=>{
                that.tableData = res.data.list;
                that.total = res.data.total;
            })
        },
        comfirm(){
            const that = this;
            let url = '';
            that.add_eidt_alert = false;
            if(that.editTitle == '添加'){
                url = potUrl.imageadd;
            }else{
                url = potUrl.imageedit
            }
            abc.post(that,url,that.editForm,res=>{
                that.getList()
            })
        },
        theClick(a,b){
            const that = this;
            if(a == 'del'){
                abc.twoTips(that,potUrl.imagedelete,'确认要删除此条数据吗？',{image_id:b.image_id},res=>{
                    that.getList()
                })
            }else if(a == 'copy'){
                console.log('cc')
                that.copy()
            }else{
                that.add_eidt_alert = true;
                if(a == 'edit'){
                    that.editTitle="编辑";
                    abc.get(that,potUrl.imagedetail,{image_id:b.image_id},res=>{
                        that.editForm = res.data 
                    })
                }else{
                    that.editTitle = '添加';
                    that.editForm = {};
                }
            }
        },
        copy(){
            let clipboard = new Clipboard('.copy')
            clipboard.on('success',e=>{
                console.log('cg')
            })
            clipboard.on('error',e=>{
                console.log('sb')
                that.$message('复制失败，请点击编辑手动复制')
            })
        },
        getSrc(data){
            //上传图片得到的路径;
            const that = this;
            that.editForm.src = data
        }


    }
}

</script>